<template>
	<view class="u-p-20">
		<u-form :model="form" ref="uForm" label-width='160'>
			<u-form-item label="" prop="areaName" required>
				<u-input v-model="form.areaName" type="select" placeholder='请选择小区' @click="selectCommunity" />
			</u-form-item>
			<u-form-item label="" prop="buildingName" required>
				<u-input v-model="form.buildingName" type="select" placeholder='请选择楼号' @click="select(2)" />
			</u-form-item>
			<u-form-item label="" prop="unitName" required>
				<u-input v-model="form.unitName" type="select" placeholder='请选择单元' @click="select(3)" />
			</u-form-item>
			<u-form-item label="" prop="houseName" required>
				<u-input v-model="form.houseName" type="select" placeholder='请选择房间' @click="select(4)" />
			</u-form-item>
			<u-form-item label="业主姓名" prop="name" required>
				<u-input v-model="form.name" placeholder='请输入业主姓名' />
			</u-form-item>
			<u-form-item label="业主电话" prop="mobile" required>
				<u-input v-model="form.mobile" placeholder='请输入业主电话' />
			</u-form-item>
			<u-form-item label="缴费金额" prop="price" required>
				<u-input type='number' v-model="form.price" placeholder='请输入缴费金额' />
			</u-form-item>
		</u-form>
		<u-button type='primary' plain @click="submit" :loading='loading'>提交</u-button>
		<city-select v-model="value" @city-change="cityChange"></city-select>
		<u-picker mode="selector" v-model="show" :range="selector" :range-key='rangeKey' @confirm='confirm'></u-picker>
	</view>
</template>

<script>
	import {
		getBuildByArea,
		getUnitByBuild,
		getHouseByUnit
	} from '@/api/index.js'
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['userInfo'])
		},
		data() {
			return {
				loading: false,
				show: false,
				value: false,
				selector: [1, 2, 3],
				rangeKey: '',
				form: {
					areaName: '',
					buildingName: '',
					unitName: '',
					houseName: '',
					name: '',
					mobile: '',
					price: ''
				},
				rules: {
					areaName: [{
						required: true,
						message: '请选择小区',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'change'
					}],
					buildingName: [{
						required: true,
						message: '请选择楼号',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'change'
					}],
					unitName: [{
						required: true,
						message: '请选择单元',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'change'
					}],
					houseName: [{
						required: true,
						message: '请选择房间',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'change'
					}],
					name: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					price: [{
						required: true,
						message: '请输入缴费金额',
						trigger: 'change'
					}]
				}
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			this.form = {
				name: this.userInfo.name,
				mobile: this.userInfo.mobile,
			}
			if (this.userInfo.house && this.userInfo.house.id) {
				getHouseByUnit({
					unitId: this.userInfo.unit.id
				}).then(res => {
					res.map(item => {
						if (item.id == this.userInfo.house.id) {
							this.form = {
								...this.form,
								houseName: item.no,
								houseId: item.id
							}
						}
					})
				})
			}
			if (this.userInfo.unit && this.userInfo.unit.id) {
				getUnitByBuild({
					building: this.userInfo.building.id
				}).then(res => {
					res.map(item => {
						if (item.id == this.userInfo.unit.id) {
							this.form = {
								...this.form,
								unitName: item.name,
								unitId: item.id
							}
						}
					})
				})
			}
			if (this.userInfo.area && this.userInfo.area.id) {
				getBuildByArea({
					areaId: this.userInfo.area.id
				}).then(res => {
					res.map(item => {
						this.form = {
							...this.form,
							areaName: item.area.name,
							areaId: item.area.id
						}
						if(this.userInfo.building && this.userInfo.building.id){
							if (item.id == this.userInfo.building.id) {
								this.form = {
									...this.form,
									buildingName: item.name,
									buildingId: item.id,
								}
							}
						}
					})
				})
			}
		},
		methods: {
			confirm(e) {
				switch (this.selectNum) {
					case 2:
						this.form = {
							...this.form,
							buildingName: this.selector[e[0]].name,
							buildingId: this.selector[e[0]].id,
							unitName:'',
							unitId:'',
							houseName:'',
							houseId:''
						}
						break;
					case 3:
						this.form = {
							...this.form,
							unitName: this.selector[e[0]].name,
							unitId: this.selector[e[0]].id,
							houseName:'',
							houseId:''
						}
						break;
					case 4:
						this.form = {
							...this.form,
							houseName: this.selector[e[0]].no,
							houseId: this.selector[e[0]].id
						}
						break;
					default:
						break;
				}
			},
			submit() {
				this.$u.debounce(
					this.$refs.uForm.validate(valid => {
						if (valid) {
							this.loading = true
							console.log('验证通过');
						} else {
							console.log('验证失败');
						}
					})
				)
			},
			selectCommunity() {
				this.value = true
			},
			select(num) {
				this.selectNum = num
				switch (num) {
					case 2:
						if (!this.form.areaId) {
							uni.showToast({
								title: '请先选择小区',
								icon: 'none'
							})
							return
						}
						this.rangeKey = 'name'
						getBuildByArea({
							areaId: this.form.areaId
						}).then(res => {
							this.selector = res
						})
						break;
					case 3:
						if (!this.form.buildingId) {
							uni.showToast({
								title: '请先选择楼号',
								icon: 'none'
							})
							return
						}
						this.rangeKey = 'name'
						getUnitByBuild({
							buildingId: this.form.buildingId
						}).then(res => {
							this.selector = res
						})
						break;
					case 4:
						if (!this.form.unitId) {
							uni.showToast({
								title: '请先选择单元',
								icon: 'none'
							})
							return
						}
						this.rangeKey = 'no'
						getHouseByUnit({
							unitId: this.form.unitId
						}).then(res => {
							this.selector = res
						})
						break;
					default:
						break;
				}
				this.show = true
			},
			cityChange(e) {
				this.form = {
					...this.form,
					areaName:e.name,
					areaId: e.id,
					buildingName: '',
					buildingId: '',
					unitName:'',
					unitId:'',
					houseName:'',
					houseId:''
				}
			}
		}
	}
</script>

<style>

</style>
